<template>
    <fieldset>
        <legend>tab切换案例</legend>
        <!-- 遍历，v-bind动态绑定class，绑定点击事件 -->
        <button v-for="btn in buttons" :key="btn" 
            :class="['tab-button', { active: btn === selectBtn }]"
            @click="handleClick(btn)">{{ btn }}</button>
        <!-- 动态绑定，切换div的内容 -->
        <div class="tab" :is="dynamic">123123123</div>
    </fieldset>
</template>

<script>
//引入
import emailCom from "./email-com.vue"
import homeCom from "./home-com.vue"
import mineCom from "./mine-com.vue"

export default {
    data() {
        return {
            buttons: ['email', 'home', 'mine'],
            selectBtn: "email",
        }
    },
    methods: {
        handleClick(btn) {
            // console.log(btn)
            this.selectBtn = btn;
        }
    },
    computed: {
        dynamic() {
            return this.selectBtn + "-com"
        }
    },
    components: {
        "email-com": emailCom,
        "mine-com": mineCom,
        "home-com": homeCom
    }
}
</script>

<style scoped>
.tab-button {
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #f0f0f0;
    margin-bottom: -1px;
    margin-right: -1px;
}

.tab-button:hover {
    background: #e0e0e0;
}

.tab-button.active {
    background: skyblue;
}

.tab {
    border: 1px solid #ccc;
    padding: 10px;
}

h1 {
    margin: 0;
}
</style> 